<template>

<!--  <div  style="width: 1700px;overflow-x: auto">-->
<!--&lt;!&ndash;    <ScaleBox>&ndash;&gt;-->

<!--&lt;!&ndash;    </ScaleBox>&ndash;&gt;-->

<!--  </div>-->
  <div >
    <el-row>
      <el-col :span="24" v-if="isDisplayKb">
        <div class="mainPage" >
          <div class="topHeader headerBg">
<!--            <img src="@/assets/images/kataichi/top.png" />-->
            <img src="@/assets/images/kataichi/title.png" class="text-overlay" />
            <div class="users">{{ times }}</div>
            <img src="@/assets/images/kataichi/kataichi.png" class="topRight" />
          </div>
          <div  style="display: flex;justify-content: space-around">
            <div class="buttonGroup">
              <div :class="button.isActive ? 'blue-button' : 'buttonClass'" v-for="(button,index)  in dateFormat"
                   @click="dateClick(button.value,index,)">
                {{button.name}}
              </div>
            </div>
          </div>
          <div  class="operate">
            <div >
              <div class="topHeader">
                <img src="@/assets/images/kataichi/xbj.png" class="littleBj" />
                <img src="@/assets/images/kataichi/ztyy.png" class="littleTitle" />
              </div>
              <table>
                <tr  class="trClass">
                  <td  class="thClass">订单类型</td>
                  <td v-for="(i,ind) in upTableField" class="thClass">{{i.label}}</td>
                  <!--            <td  >未接车</td>-->
                  <!--            <td >已接车</td>-->
                  <!--            <td >已离场</td>-->
                  <!--            <td >交付时效</td>-->
                  <!--            <td >收入</td>-->
                  <!--            <td >成本</td>-->
                  <!--            <td >毛利</td>-->
                  <!--            <td >待结算车辆</td>-->
                  <!--            <td >待结算金额</td>-->
                </tr>
                <tr v-for="(item,index) in upTable ">
                  <td class="tdClass" v-html="item.template" align="center"></td>
                  <td class="tdClass" v-for="(i,ind) in upTableField">{{item[i.field]}}</td>
                </tr>
              </table>
            </div>
            <div >
              <div class="topHeader">
                <img src="@/assets/images/kataichi/xbj.png" class="littleBj" />
                <img src="@/assets/images/kataichi/ddyy.png" class="littleTitle" />
              </div>
              <table>
                <tr  class="trClass">
                  <td  class="thClass">订单类型</td>
                  <td v-for="(i,ind) in downTableField" class="thClass">{{i.label}}</td>
                </tr>
                <tr v-for="(item,index) in downTable ">
                  <td class="tdClass" v-html="item.template"></td>
                  <td class="tdClass" v-for="(i,ind) in downTableField">{{item[i.field]}}</td>
                </tr>
              </table>
            </div>
            <Loading ref="loading"></Loading>
          </div>

        </div>
      </el-col>
        <div  v-else>        <img src="@/assets/images/kataichi/Logo.png" style="margin: auto;height: 725px" ></div>
    </el-row>

  </div>




</template>

<script>
import moment from "moment";
import {bulletinBoard,reportOperateIsDisplay} from "@/api/kataichi";
import Loading from "@/components/loading/Loading.vue"
import ScaleBox from "@/views/ccrTransfer/ScaleBox";
export default {
  name: "index",
  components: {ScaleBox, Loading},
  data(){
    return{
      times: "",
      checkboxGroup1: ['日'],
      dateFormat: [
        {
          isActive:false,
          name:'日',
          value:0
        },
        {
          isActive:false,
          name:'月',
          value:1
        },
        {
          isActive:false,
          name:'季度',
          value:3
        },
        {
          isActive:false,
          name:'年',
          value:2
        }
      ],
      corresponding:[
        {
          name:'门店',
          template:`<div style="display: flex;  justify-content: space-around"><img src=${require('@/assets/images/kataichi/md.png')} /></div>`
        },
        {
          name:'C端客户',
          template:`<div style="display: flex;  justify-content: space-around"><img src=${require('@/assets/images/kataichi/cd.png')} /></div>`
        },
        {
          name:'B端客户',
          template:`<div style="display: flex;  justify-content: space-around"><img src=${require('@/assets/images/kataichi/bd.png')} /></div>`
        },
        {
          name:'老车翻新',
          template:`<div style="display: flex;  justify-content: space-around"><img src=${require('@/assets/images/kataichi/lcfx.png')} /></div>`
        },
      ],
      upTable:[],
      downTable:[],
      upTableField:[

        {
          label:'未接车',
          field:'noReceiveCar'
        },
        {
          label:'已接车',
          field:'receiveCar'
        },
        {
          label:'已离场',
          field:'departure'
        },
        {
          label:'交付时效',
          field:'allTime'
        },
        {
          label:'收入',
          field:'total'
        },
        {
          label:'成本',
          field:'items'
        },
        {
          label:'毛利',
          field:'profit'
        },
        {
          label:'待结算车辆',
          field:'noDeparture'
        },
        {
          label:'待结算金额',
          field:'noTotal'
        },
      ],
      downTableField:[
        {
          label:'已认证',
          field:'authentication'
        },
        {
          label:'待复检',
          field:'noRecheck'
        },
        {
          label:'复检中',
          field:'inRecheck'
        },
        {
          label:'复检完成',
          field:'isRecheck'
        },
        {
          label:'待确认',
          field:'noConfirm'
        },
        {
          label:'整备中',
          field:'inPrepare'
        },
        {
          label:'整备完成',
          field:'isPrepare'
        },
        {
          label:'待质检',
          field:'noQuality'
        },
        {
          label:'质检中',
          field:'inQuality'
        },
        {
          label:'质检完成',
          field:'isQuality'
        },
        {
          label:'车辆返工',
          field:'rework'
        },
        {
          label:'展厅车辆',
          field:'exhibition'
        },
      ],
      isDisplayKb:false,
    }
  },
  created() {
    reportOperateIsDisplay().then((res)=>{
      if (res.data.result){
        this.isDisplayKb=true
        this.$nextTick(()=>{
          this.dateClick(0,0)
        })
      }else{
        this.isDisplayKb=false
      }
      // this.$nextTick(()=>{
      //   this.dateClick(0,0)
      //   this.isDisplayKb=true
      // })
    })

  },
  methods: {
    dateClick(value,index){
      this.dateFormat.forEach((i)=>{
        i.isActive=false
      })
      this.dateFormat[index].isActive=true

      this.getData(value)
    },
    getData(type){
      this.$nextTick(()=>{
        this.$refs.loading.loading()
      })
      bulletinBoard({type:type}).then((res)=>{
        this.$nextTick(()=>{
          this.upTable = res.data.result.up.map(item => {
            // 在aaa中查找与bbb当前项的a属性相匹配的对象
            const matchInAaa = this.corresponding.find(obj => obj.name === item.orderTypeName);
            // 如果找到匹配项，则合并对象并返回；否则，可以返回一个部分对象或null
// 遍历对象的键
            Object.keys(item).forEach(key => {
              const value = item[key];

              if (value === null || value === undefined || value === '') {
                // 将空值赋为 0
               item[key]=0
              }
            });
            if (matchInAaa) {
              return {
                ...item,
                orderTypeName: item.orderTypeName,
                template: matchInAaa.template
              }
            }else{
              return {
                ...item
              }
            }
          });
          this.downTable = res.data.result.down.map(item => {
            // 在aaa中查找与bbb当前项的a属性相匹配的对象
            const matchInAaa = this.corresponding.find(obj => obj.name === item.orderTypeName);
            // 如果找到匹配项，则合并对象并返回；否则，可以返回一个部分对象或null
            Object.keys(item).forEach(key => {
              const value = item[key];

              if (value === null || value === undefined || value === '') {
                // 将空值赋为 0
                item[key]=0
              }
            });
            if (matchInAaa) {
              return {
                ...item,
                orderTypeName: item.orderTypeName,
                template: matchInAaa.template
              }
            }else{
              return {
                ...item
              }
            }
          });
        })

      }).finally(()=>{
        this.$nextTick(()=>{
          this.$refs.loading.close()
        })
      })
    }
  },
  mounted() {
    this.chatTimer = setInterval(() => {
      this.times = moment().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  //组件销毁前
  beforeDestroy() {
    clearInterval(this.chatTimer);
  },
};
</script>
<style scoped lang="scss" >
.mainPage{
  background-image: url("../../../assets/images/kataichi/kaBack.png");
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
  //width: 1700px;
  //height: 1080px;
  height: 100%;
  //background-color: red !important;
  .topHeader{
    position: relative;
    display: inline-block;
    margin-top: 2px;
  }
}
.text-overlay{
  position: absolute;
  top: 22px;  /* 使文字垂直居中 */
  left: 82px; /* 使文字水平居中 */
  //transform: translate(-50%, -50%); /* 将文字移动到容器的中心 */
}
.users{
  position: absolute;
  top: 35px;  /* 使文字垂直居中 */
  right: 235px; /* 使文字水平居中 */
  color: white;
}
.topRight{
  position: absolute;
  top: 33px;  /* 使文字垂直居中 */
  right: 20px; /* 使文字水平居中 */
}
.buttonGroup{
  display: flex;
  justify-content: space-around;
  border: #0E457D 1px solid;
  border-radius: 10px;
}
.buttonClass{
  font-size: 20px;
  height: 50px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #07294f;
  cursor: pointer;
  color: white;
}
.blue-button{
  font-size: 20px;
  height: 50px;
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0e457d;
  cursor: pointer;
  border-radius: 10px;
  color: white;
}
.operate{
  width: 95%;
  margin: 0 auto;
}
.littleTitle{
  position: absolute;
  top: 15px;  /* 使文字垂直居中 */
  left: 30px; /* 使文字水平居中 */
}
.trClass{
  background-color: #0e457b;
  td{
    text-align: center;
    height: 68px;
    border: 1px solid rgba(132, 188, 216, 0.6) ;
    &:first-of-type{
      border-radius:  10px 0 0 10px;
    }
    &:last-of-type{
      border-radius:  0 10px 10px 0;
    }
  }
}

.tdClass{

  height: 68px;
  opacity: 0.8;
  font-size: 18px;
  color: white;
  font-family: "PingFang SC";
  font-style: normal;
  text-align: center;
  font-weight: normal;
  border: 1px solid rgba(132, 188, 216, 0.6) ;
  background-color: #0a2541;

  &:first-of-type{
    border-radius:  6px 0 0 6px;
    background-color: #3d7fc4;

  }
  &:last-of-type{
    border-radius:  0 6px 6px 0;
  }
}
.thClass{
  color: white;
}
table{
  //border-collapse: collapse;
  //border-radius: 10px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* 可以设置为你想要的间距 */
}
.headerBg{
  width: 100%;
  height: 80px;
  background-image: url("../../../assets/images/kataichi/top.png");
  background-size: 100% 100%; /* 背景图片覆盖整个元素 */
  background-repeat: no-repeat; /* 背景图片不重复 */
  background-position: center; /* 背景图片居中 */
}

</style>
